<template>
	<div class="my_dialog_btn">
		<van-popup v-model:show="show" style="background: none">
			<main>
				<div class="content_box">
					<slot name="content" />
				</div>
				<div
					class="btns"
					:class="column ? 'column_border' : 'initial_borde'"
					:style="{ 'flex-direction': column ? 'column' : 'initial' }"
				>
					<slot name="btn" />
				</div>
			</main>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const emits = defineEmits<{
	(event: 'update:show'): void;
}>();

const props = defineProps<{
	column?: boolean;
	show: boolean;
}>();

const show = computed<boolean>({
	get() {
		return props.show;
	},
	set() {
		emits('update:show');
	}
});
</script>

<style lang="scss" scoped>
.my_dialog_btn {
	main {
		width: 265px;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 10px;
		opacity: 0.94;
		box-shadow: 0px 0px 33px 0px rgba(158, 158, 158, 0.54);
		text-align: center;
		background: #ffffff;
		.content_box {
			padding: 30px;
			color: #1a1a1a;
			font-size: 17px;
			font-weight: 500;
		}
		:deep(.btns) {
			@include flx-center;
			flex-direction: column;
			button {
				width: 100%;
				border: none;
				color: #2d82f5;
				font-size: 15px;
				font-weight: 500;
				background: white;
			}
		}
		.initial_borde {
			border-top: 1px solid #eeeeee;
			button {
				border-right: 1px solid #eeeeee;
				&:last-child {
					border-right: none;
				}
			}
		}
		.column_border {
			button {
				border-top: 1px solid #eeeeee;
			}
		}
	}
}
</style>
